<template>
    <div class="CodeButtonWrap">
        <a-tooltip placement="top" title="二维码信息">
            <a-button icon="qrcode" type="link" @click="handClick"></a-button>
        </a-tooltip>
        <a-modal :visible="visible" :footer="null" :title="`【${record.fireId}】二维码`" @cancel="cancel" width="700px"
            :bodyStyle="{ padding: '0px' }">
            <div class="modalWrapBox">
                <a-row :gutter="[0, 12]">
                    <a-col :span="12">
                        <div class="leftBox">
                            <a-space direction="vertical">
                                <div class="title">
                                    灭火器信息二维码
                                </div>
                                <a-spin :spinning="viewLoading">
                                    <div class="code">
                                        <template v-if="leftCode || record.qrCodeInfoUrl">
                                            <viewer style="width: 100%;height: 100%;">
                                                <img :src="leftCode || record.qrCodeInfoUrl" alt="">
                                            </viewer>
                                        </template>
                                        <template v-else>
                                            <a-empty description="请生成二维码"></a-empty>
                                        </template>
                                    </div>
                                </a-spin>
                                <a-space class="buttonWrap" v-if="leftCode || record.qrCodeInfoUrl">
                                    <a-button @click="generateCodeFrame('left')"
                                        :loading="codeLoading && type == 'left'" v-if="false">重新生成</a-button>
                                    <a-button type="primary"
                                        @click="downLoadCode(leftCode || record.qrCodeInfoUrl)">下载</a-button>
                                </a-space>
                                <a-space class="buttonWrap" v-else>
                                    <a-button @click="generateCodeFrame('left')" type="primary"
                                        :loading="codeLoading && type == 'left'">生成二维码</a-button>
                                </a-space>
                            </a-space>
                        </div>
                    </a-col>
                    <a-col :span="12">
                        <div class="leftBox">
                            <a-space direction="vertical">
                                <div class="title">
                                    灭火器编码二维码
                                </div>
                                <a-spin :spinning="viewLoading">
                                    <div class="code">
                                        <template v-if="rightCode || record.qrCodeFireCodeUrl">
                                            <viewer style="width: 100%;height: 100%;">
                                                <img :src="rightCode || record.qrCodeFireCodeUrl" alt="">
                                            </viewer>
                                        </template>
                                        <template v-else>
                                            <a-empty description="请生成二维码"></a-empty>
                                        </template>
                                    </div>
                                </a-spin>
                                <a-space class="buttonWrap" v-if="rightCode || record.qrCodeFireCodeUrl">
                                    <a-button @click="generateCodeFrame('right')"
                                        :loading="codeLoading && type == 'right'" v-if="false">重新生成</a-button>
                                    <a-button type="primary"
                                        @click="downLoadCode(rightCode || record.qrCodeFireCodeUrl)">下载</a-button>
                                </a-space>
                                <a-space class="buttonWrap" v-else>
                                    <a-button @click="generateCodeFrame('right')" type="primary"
                                        :loading="codeLoading && type == 'right'">生成二维码</a-button>
                                </a-space>
                            </a-space>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </a-modal>
    </div>
</template>
<script>
export default {
    name: 'CodeBUtton',
    props: {
        menuId: {
            type: [Number, String],
        },
        ids: {
            type: [Number, String],
        },
        onRefresh: {
            type: Function,
        },
        aParams: {
            type: Object,
        },
        record: {
            type: Object,
        }
    },
    data() {
        return {
            visible: false,
            codeLoading: false,
            viewLoading: false,
            rightLoading: false,
            leftCode: '',
            rightCode: '',
            type: '',
        }
    },
    methods: {
        handClick() {
            this.visible = true;
            this.getCordInfo();
        },
        cancel() {
            this.visible = false;
        },
        getCordInfo() {
            this.viewLoading = true;
            let params = {
                id: this.record.id,
            };
            this.getAxios(this.$getFireExtinguisherPic, params).then((res) => {
                if (res.code == 200) {
                    this.rightCode = `data:image/png;base64,${res.data.qrCodeFireCodeUrl}`
                    this.leftCode = `data:image/png;base64,${res.data.qrCodeInfoUrl}`
                } else {
                }
            }).catch(() => {
            }).finally(() => {
                this.viewLoading = false;
            })
        },
        // 生成二维码
        generateCodeFrame(type) {
            this.type = type;
            let params = {
                id: this.record.id,
            };
            let url = '';
            if (type == 'left') {
                url = this.$createFireQRCodeInfo;
            } else if (type == 'right') {
                url = this.$createFireQRCodeFireCode
            }
            this.codeLoading = true;
            this.getAxios(url, params).then((res) => {
                if (res.code == 200) {
                    if (type == 'left') {
                        this.leftCode = res.msg;
                    } else if (type == 'right') {
                        this.rightCode = res.msg;
                    }
                    this.$message.success({
                        content: '生成成功',
                        duration: 2.5,
                    });
                    this.onRefresh();
                } else {
                    this.$message.error({
                        content: res.msg || '操作失败',
                        duration: 2.5,
                    });
                }
            }).catch(() => {
            }).finally(() => {
                this.codeLoading = false;
            })
        },
        downLoadCode(u) {
            window.location.href = u;
        },
    },
    watch: {
        record: {
            handler(nVal, oVal) {
            },
            deep: true,
            immediate: true,
        }
    }
}
</script>
<style lang="less" scoped>
.modalWrapBox {
    height: 440px;
    width: 100%;
    padding: 10px 12px;

    ::v-deep {

        .ant-row,
        .ant-col {
            height: 100%;
        }
    }

    .leftBox {
        width: 100%;
        height: 100%;

        ::v-deep {

            .ant-space,
            .ant-space-item {
                width: 100%;
            }
        }

        .title {
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 560;
            font-size: 18px;
        }

        .code {
            height: calc(400px - 24px - 48px);
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .buttonWrap {
            height: 36px;

            ::v-deep {

                .ant-space,
                .ant-space-item {
                    display: flex;
                    justify-content: center;
                }
            }
        }
    }
}
</style>